File: /var/www/html/dashboard.orbiwheels.com/resources/views/admin/booking/index.blade.php
@extends('layout.master')
@section('content')
<div class="right_col" role="main">
<div class="">
<div class="clearfix"></div>
@include('alerts')
<div class="row" style="display: block;">
<div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_title">
<h2>Booking <small>List</small></h2>
<ul class="nav navbar-right panel_toolbox">
{{-- @can('staff.create') --}}
<li><a href="{{ route('admin.booking.create') }}" class="addBtn"><i class="fa fa-plus"></i>
Add Booking</a>
</li>
{{-- @endcan --}}
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="row">
<div class="col-sm-12">
<div class="row mb-3">
<div class="col-md-2">
<label for="booking_type" class="form-label">Booking Type</label>
<select id="booking_type" class="form-control">
<option value="">All</option>
<option value="1">One Way</option>
<option value="2">Two Way</option>
</select>
</div>
<div class="col-md-2">
<label for="ride_type_filter" class="form-label">Ride Type</label>
<select id="ride_type_filter" class="form-control">
<option value="">All Ride Types</option>
<option value="1">Office</option>
<option value="2">Airport</option>
<option value="3">Railway</option>
<option value="4">Bus</option>
<option value="5">Outstation</option>
<option value="6">City Tour</option>
</select>
</div>
<div class="col-md-2">
<label for="status" class="form-label">Booking Status</label>
<select name="status" id="status" class="form-control">
<option value="">Select Status</option>
<option value="{{ \App\Models\BookingRide::PENDING }}">Pending</option>
<option value="{{ \App\Models\BookingRide::ASSIGNED }}">Assigned</option>
<option value="{{ \App\Models\BookingRide::ONGOING }}">Ongoing</option>
<option value="{{ \App\Models\BookingRide::COMPLETED }}">Completed</option>
<option value="{{ \App\Models\BookingRide::CANCELLED }}">Cancelled</option>
</select>
</div>
</div>
<div class="card-box table-responsive">
{{ $dataTable->table() }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Assign Transporter Modal -->
<div class="modal fade" id="assignTransporterModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<form id="assignTransporterForm">
@csrf
<input type="hidden" id="assignBookingId" name="booking_id">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Assign Transporter</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
</div>
<div class="modal-body">
<input type="text" id="transporterSearch" class="form-control mb-3"
placeholder="Search transporter...">
<input type="hidden" id="transporter_id" name="transporter_id" required>
<div class="row" id="transporterList">
<!-- Cards will be loaded here dynamically -->
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Assign</button>
</div>
</div>
</form>
</div>
</div>
@endsection
@push('script')
{{ $dataTable->scripts(attributes: ['type' => 'module']) }}
<script>
$(document).on('change', '#status, #ride_type_filter, #booking_type, #from_date, #to_date', function() {
$('#booking-table').DataTable().ajax.reload();
});
</script>
<script>
function renderTransporters(list) {
let html = '';
if (list.length > 0) {
list.forEach(function(t) {
html += `
<div class="col-md-6 col-sm-6 profile_details pb-2">
<div class="well profile_view transporter-card selectable shadow-sm"
data-id="${t.id}">
<div class="col-sm-12">
<h4 class="brief"><i>${t.company_name ?? ''}</i></h4>
<div class="left col-md-7 col-sm-7">
<ul class="list-unstyled">
<li><i class="fa fa-user"></i> Name: ${(t.first_name ?? '')} ${(t.last_name ?? '')}</li>
<li><i class="fa fa-envelope"></i> Email: ${t.email ?? ''}</li>
<li><i class="fa fa-phone"></i> Phone: ${t.phone ?? ''}</li>
</ul>
</div>
<div class="right col-md-5 col-sm-5 text-center">
<img src="${t.image ? '/storage/' + t.image : '/images/user.png'}"
class="img-circle img-fluid" alt="">
</div>
</div>
<div class="profile-bottom text-center">
<div class=" col-sm-6 emphasis">
</div>
</div>
</div>
</div>
`;
});
} else {
html = `<div class="col-12 text-center text-muted">No transporters found</div>`;
}
$('#transporterList').html(html);
}
$(document).on('click', '.transporter-card', function() {
$('.transporter-card').removeClass('selected border-success');
$(this).addClass('selected border-success');
$('#transporter_id').val($(this).data('id'));
});
$(document).ready(function() {
// Open modal and load initial transporters
$(document).on('click', '.assign-transporter', function() {
let bookingId = $(this).data('booking-id');
$('#assignBookingId').val(bookingId);
$('#assignTransporterModal').modal('show');
// Load default transporters (first 10)
$.get("{{ route('admin.booking.transporters.search') }}", function(res) {
renderTransporters(res);
});
});
// Live search
$('#transporterSearch').on('keyup', function() {
let query = $(this).val();
$.get("{{ route('admin.booking.transporters.search') }}", {
q: query
}, function(res) {
renderTransporters(res);
});
});
// Submit assign
$('#assignTransporterForm').on('submit', function(e) {
e.preventDefault();
let bookingId = $('#assignBookingId').val();
let formData = $(this).serialize();
$.post('/admin/booking/' + bookingId + '/assign-transporter', formData, function(res) {
if (res.status) {
$('#assignTransporterModal').modal('hide');
window.LaravelDataTables['booking-table'].ajax.reload();
toastr.success('Transporter assigned successfully!', 'Success');
} else {
toastr.error('Something went wrong!', 'Error');
}
}).fail(function() {
toastr.error('Server error. Please try again.', 'Error');
});
});
});
</script>
@endpush